import React, { useEffect, useState } from 'react';
// 导入高德地图
import AMapLoader from '@amap/amap-jsapi-loader';
import { message, Button } from 'antd';
const Index = () => {

  const [myMap,setMyMap] = useState()

  const [myAMap,setMyAMap] = useState()

  useEffect(()=>{
    AMapLoader.load({
      key: '81a034c1d8522e4db17d8a854004d1f5', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.ToolBar','AMap.Scale','AMap.CitySearch'], // 需要使用的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
         const map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          //pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
          zoom: 12, // 初始化地图级别
          center: [116.40944792968753, 39.901030607457564], // 初始化地图中心点位置
          terrain: true, // 开启地形图
          mapStyle: 'amap://styles/0527458982faa051cc0bd48055544ba8',//设置地图的显示样式
        });



        // 使用插件，使用插件前需要先导入导致
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);

        var scale = new AMap.Scale();
        map.addControl(scale);

        map.on('complete', function(){
          // 地图图块加载完成后触发
          console.log('地图图块加载完成后触发');
        });

        // 传入经纬度，设置地图中心点
        var position = new AMap.LngLat(116.2, 39.901030607457564);  // 标准写法
        // 简写 var position = [116, 39];
        map.setCenter(position);


        // 构造点标记
        var marker = new AMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: [116.40944792968753, 39.901030607457564],
          title: '千峰'
        });
        marker.on('click', (e)=>{
          console.log(e);
          message.success('被点击了')
        })
        // 将创建的点添加在地图中
        map.add(marker)

        // map.setMapStyle('amap://styles/8e5446fff49f04bd40ccebf09a5940a5');


        setMyMap(map)
        setMyAMap(AMap)

      })
      .catch(e => {
        console.log(e);
      });




  }, [])

  return (
    <div>
      <h3>高德 <Button onClick={()=>{
        /*
        console.log(myMap);
        // 构造点标记
        var marker = new myAMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: [116.2, 39.901030607457564],
          title: '千峰'
        });
        marker.on('click', (e)=>{
          console.log(e);
          message.success('被点击了')
        })
        // 将创建的点添加在地图中
        myMap.add(marker)
        */


           // 创建纯文本标记
           /*
    var text = new myAMap.Text({
      text:'纯文本标记',
      anchor:'center', // 设置文本标记锚点
      draggable:true,
      cursor:'pointer',
      angle:10,
      style:{
          'padding': '.75rem 1.25rem',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'white',
          'width': '15rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '20px',
          'color': 'blue'
      },
      position: [116.396923,39.918203]
  });

  text.setMap(myMap);
  */

/*
  for(var i=0;i<window.capitals.length;i+=1){
    var center = window.capitals[i].center;
    var circleMarker = new myAMap.CircleMarker({
      center:center,
      radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
      strokeColor:'white',
      strokeWeight:2,
      strokeOpacity:0.5,
      fillColor:'rgba(0,0,255,1)',
      fillOpacity:0.5,
      zIndex:10,
      bubble:true,
      cursor:'pointer',
      clickable: true
    })
    circleMarker.setMap(myMap)
  }
*/


 //获取用户所在城市信息
 function showCityInfo() {
  //实例化城市查询类
  var citysearch = new myAMap.CitySearch();
  //自动获取用户IP，返回当前城市
  citysearch.getLocalCity(function(status, result) {
    console.log(status, result);
      if (status === 'complete' && result.info === 'OK') {
          if (result && result.city && result.bounds) {
              var cityinfo = result.city;
              var citybounds = result.bounds;
              document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
              //地图显示当前城市
              myMap.setBounds(citybounds);
          }
      } else {
          document.getElementById('info').innerHTML = result.info;
      }
  });
}
showCityInfo();


      }}>添加</Button></h3>
      <div id='container' style={{height: 500}}> </div>

    </div>
  );
};

export default Index;
